<template>
	<view class="popComBox">
		<view class="top">
			<text class="icon uniicons" @click="closePop">&#xe582;</text> 回复({{choseArr.remnant}})
		</view>
		<scroll-view class="com_scrollYCom" scroll-y="true" @scrolltolower="loadMore()">
			<view class="com_item" style="margin-bottom: 20rpx; border-bottom: 4px solid #F8F8F8;">
				<view class="left">
					<view class="img_wrapL">
						<image class="img" mode="aspectFit" :src="choseArr.appIcon"></image>
					</view>
				</view>
				<view class="right">
					<view class="com_name">{{choseArr.commentName}}</view>
					<view class="com_cont">
						{{choseArr.content}}
					</view>
					<view class="bottom">
						<view class="b_l">
							<text class="tips">楼主</text>
							<text class="tips">
								{{choseArr.createTime}}
							</text>
						</view>
						<view class="b_r">
							<text class="icon">
								<text class="uniicons"
									@click="addRemantPar(choseArr.id, choseArr.commentName)">&#xe263;</text>
								<text class="num" v-if="choseArr.remnant">{{choseArr.remnant}}</text>
							</text>
							<text class="icon" :class="[choseArr.isPraise ? 'active' : '']">
								<text class="uniicons" @click="thumupPar(choseArr.id)">&#xe83f;</text>
								<text class="num" v-if="choseArr.praiseNum">{{choseArr.praiseNum}}</text>
							</text>
						</view>
					</view>
				</view>
			</view>
			<view class="all-comments">全部回复</view>

			<view class="com_item" v-for="(item, index) in comList" :key="item.id">
				<view class="left">
					<view class="img_wrapL">
						<image class="img" mode="aspectFit" :src="item.appIcon"></image>
					</view>
				</view>
				<view class="right">
					<view class="com_name">{{item.commentName}}</view>
					<view class="com_cont" @click="addRemant(item.id, item.commentName)">
						<text class="replyName" v-if="item.replyName">@{{item.replyName}}</text>
						{{item.content}}
					</view>
					<view class="com_img_list">
						<view class="img_wrap" v-for="(itemSub, index) in item.listForumAccessoryVo" :key=itemSub.id>
							<image :src="itemSub.url" mode="aspectFill"></image>
						</view>
					</view>
					<view class="bottom">
						<view class="b_l">
							<text class="tips">{{index + 1}}楼</text>
							<text class="tips">
								{{item.createTime}}
							</text>
						</view>
						<view class="b_r">
							<text class="icon" @click="addRemant(item.id, item.commentName,index)">
								<text class="uniicons">&#xe263;</text>
								<text class="num" v-if="item.remnant">{{item.remnant}}</text>
							</text>
							<text class="icon" :class="[item.isPraise ? 'active' : '']">
								<text class="uniicons" @click="thumup(index, item.id)">&#xe83f;</text>
								<text class="num" v-if="item.praiseNum">{{item.praiseNum}}</text>
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="loading-more" v-if="this.comChildPages>1">
				<text class="loading-more-text">{{comChildLoadText}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "comment",
		props: {
			parComList: {
				type: Array,
				default: []
			},
			choseArr: {
				type: Object,
				default: {}
			},
			comChildListIndex: {
				type: Number,
				default: 0
			},
			comChildPages: {
				type: Number,
				default: 0
			},
			comChildLoadText: {
				type: String,
				default: "加载更多..."
			}
		},
		data() {
			return {
				comList: this.parComList,
			};
		},
		watch: {
			parComList(val) {
				this.comList = val
			},
		},
		methods: {
			//给楼主点赞
			thumupPar(id) {
				this.$emit("thumupPar", id)
			},
			//给楼主回复
			addRemantPar(id, name) {
				let obj = {}
				obj.id = id;
				obj.name = name;
				obj.index = this.comChildListIndex;
				this.$emit("addComent", obj)
			},
			//点赞
			thumup(index, id) {
				this.$api.praiseComment(id).then(res => {
					let data = res.data.data;
					this.comList[index].isPraise = data
					if (data) {
						this.comList[index].praiseNum = this.comList[index].praiseNum + 1;
					} else {
						this.comList[index].praiseNum = this.comList[index].praiseNum - 1;
					}
				})
			},
			//添加评论-二级评论
			addRemant(id, name,index) {
				let obj = {}
				obj.id = id;
				obj.name = name;
				obj.index = this.comChildListIndex;  //一级下标
				obj.childIndex=index; //二级下标
				this.$emit("addComent", obj)
			},
			//加载更多
			loadMore() {
				this.$emit("loadChildMore")
			},
			//关闭弹窗
			closePop() {
				this.$emit("closeChildPop")
			}
		}
	}
</script>

<style scoped lang="scss">
	.popComBox {
		height: 70vh;
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 30rpx;

		.top {
			height: 80rpx;
			display: flex;
			align-items: center;

			.icon {
				font-size: 40rpx;
				font-weight: bold;
			}
		}

		.com_scrollYCom {
			width: 100%;
			height: calc(100% - 80rpx);
		}

		.com_item {
			padding: 20rpx 0 20rpx 100rpx;
			border-bottom: 1px solid #EEEEEE;
			position: relative;
			background: #FFFFFF;

			.left {
				position: absolute;
				left: 0;
				right: 0;
				width: 80rpx;

				.img_wrapL {
					height: 80rpx;
					width: 80rpx;
					overflow: hidden;
					border-radius: 50%;

					.img {
						width: 100%;
						height: 100%;
					}
				}

			}

			.com_name {
				font-size: 30rpx;
				color: #333333;
				font-weight: bold;
				margin-bottom: 14rpx;
			}

			.replyName {
				color: #F96363;
				margin-right: 10rpx;
			}

			.com_cont {
				font-size: 28rpx;
				color: #666666;
				margin-bottom: 10rpx;
			}

			.com_img_list {
				.img_wrap {
					width: 88%;
					margin-bottom: 10rpx;
					overflow: hidden;
				}
			}

			.bottom {
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.b_l {
					font-size: 22rpx;
					color: #999999;

					.tips {
						margin-right: 20rpx;
					}
				}

				.b_r {
					padding: 0 30rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #333333;
					}

					.active {
						color: #F96363;
					}

					.num {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}
			}
		}

		.loading-more {
			align-items: center;
			justify-content: center;
			padding-top: 10px;
			padding-bottom: 10px;
			text-align: center;
		}

		.loading-more-text {
			font-size: 28rpx;
			color: #999;
		}
	}
	.all-comments{
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 20rpx;
	}
</style>
